<template>
  <div class="app-container">
    <el-header class="header">
      <h1 class="header-title">重庆大学附属医院</h1>
      <h1 class="welcome-title">{{ name }}，您好！</h1>
      <el-button type="info" round @click="handleLeave()"
        >退出</el-button>
    </el-header>
    <div class="main-container">
      <el-row class="tac">
        <el-menu style="width: 200px" :default-active="activeIndex" @select="handleSelect">
          <el-menu-item v-if="roletype === '0' || roletype === '2'" index="1">
            <template v-slot:title>
              <span class="menu-title">患者队列</span>
            </template>
          </el-menu-item>
          <el-menu-item v-if="roletype === '0' || roletype === '2'" index="2">
            <template v-slot:title>
              <span class="menu-title">编辑病历</span>
            </template>
          </el-menu-item>
          <el-menu-item v-if="roletype === '1' || roletype === '2'" index="3">
            <template v-slot:title>
              <span class="menu-title">开药队列</span>
            </template>
          </el-menu-item>
          <el-menu-item v-if="roletype === '1' || roletype === '2'" index="4">
            <template v-slot:title>
              <span class="menu-title">药品库存</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-row>
      <el-main class="content">
        <router-view></router-view>
      </el-main>
    </div>
  </div>
</template>

<script>
export default {
  name: "DoctorComponent",
  data() {
    return {
      name: localStorage.getItem("doctor") || "请登录",
      roletype: localStorage.getItem("roletype") || "2",
      activeIndex: '' // 新增的响应式数据属性
    };
  },
  watch: {
    $route(to) {
      this.handleRouteChange(to);
    },
    roletype(newVal) {
      // 当角色类型变化时，也需要更新激活索引
      this.activeIndex = this.getActiveIndex(newVal);
    }
  },
  methods: {
    handleLeave() {
      localStorage.clear();
      this.$router.push({ name: "Login" });
    },
    getActiveIndex(roletype) {
      return roletype === "1" ? "3" : "1";
    },
    handleSelect(index) {
      if (this.getRouteNameByIndex(index) === "DoctorDrugStock") {
        this.$router.push({ name: this.getRouteNameByIndex(index), params: { drugs: "-1" }  });
      } else {
        this.$router.push({ name: this.getRouteNameByIndex(index)});
      }
      this.activeIndex = index; // 更新激活索引
    },
    getRouteNameByIndex(index) {
      switch (index) {
        case "1": return "DoctorPatientList";
        case "2": return "DoctorEditMedicalRecord";
        case "3": return "DoctorDispensary";
        case "4": return "DoctorDrugStock";
        default: return null;
      }
    },
    handleRouteChange(to) {
      const indexMap = {
        "DoctorEditMedicalRecord": "2",
        "DoctorDispensary": "3",
        "DoctorDrugStock": "4",
        "DoctorPatientList": "1"
      };
      this.activeIndex = indexMap[to.name];
    },
  },
  mounted() {
    console.log('Name:', this.name);
    console.log('Type:', this.roletype);
    this.activeIndex = this.getActiveIndex(this.roletype); // 设置初始激活索引
    this.handleRouteChange(this.$route);
  }
};
</script>

<style scoped>
/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.app-container {
  display: flex;
  flex-direction: column;
  width: 100vw; /* 设置宽度为视口宽度的100% */
  height: 90vh; /* 设置高度为视口高度的100% */
  border: 1px solid #ccc; /* 添加边框 */
  border-radius: 15px; /* 添加圆角 */
  overflow: hidden; /* 确保内容不会溢出圆角 */
}
.header {
  display: flex;
  justify-content: space-between; /* 左右对齐 */
  align-items: center; /* 垂直居中对齐 */
  background-color: #f9f9f9;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header-title {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  margin-left: 10px;
}

.welcome-title {
  margin: 0;
  font-size: 18px;
  font-weight: normal;
}

.main-container {
  display: flex;
  flex: 1;
  align-items: flex-start; /* 将内容靠上对齐 */
  padding-top: 20px; /* 添加顶部内边距 */
}

.sidebar {
  background-color: #f0f0f0;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.content {
  flex: 1;
  padding: 20px;
}

.user-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.page-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
}

.tac {
  font-weight: bold; /* 使tac变粗 */
}

.menu-title {
  font-size: 18px; /* 设置菜单项标题字体大小 */
}
</style>
